<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>捕获数据列表</title>
        <link rel="stylesheet" href="/css/my.css?t=3">
    <style>
        .level {
            text-align: center;
        }
        .level-1{
            background-color: lightpink;
            color: whitesmoke;
            
        }
        .level-2{
            background-color: red;
            color: white;
        }
        .level-3{
            background-color: rgb(134, 5, 5);
            color: white;
        }
    </style>
    <script src="/js/my.js"></script>
    </head>
    <body>
        <div>
            <div>
                <input type="text" placeholder="搜索关键字" id="kwID">
                <button type="button" onclick="search()">搜索</button>
            </div>
            <table width="800" border="1" cellpadding="10" cellspacing="0">
                <caption><h3>敏感词列表</h3></caption>
                <thead>
                    <th>ID</th>
                    <th width="70%">正文</th>
                    <th>关联敏感词</th>
                    <th>保密级别</th>
                </thead>
                <tbody id="tbody">

                </tbody>
                <tfoot>
                    <td colspan="4" align="center">
                        <div id="pageInfo"></div>
                    </td>
                </tfoot>
            </table>
        </div>
        <script>
            window.onload = function(){
                loaddata();
            }
            let page=1;
            pagesize=10;
            let kw="";  // 搜索关键字
            let level_names = ["保密", "秘密", "绝密"];

            function loaddata(){
                fetch("/cgi-bin/words?page="+page+"&pagesize="+pagesize+"&kw="+kw).then(resp=>resp.json()).then(data=>{
                    console.log(data);
                    if(data.total > 0){
                        tbody.innerHTML = "";
                        data.data.forEach(item=>{
                            let tr = document.createElement("tr");
                            let td1 = document.createElement("td");
                            let td2 = document.createElement("td");
                            let td3 = document.createElement("td");
                            let td4 = document.createElement("td");
                            td1.innerText = item.id;
                            td2.innerText = item.content;
                            td3.innerText = item.word;
                            let level = parseInt(item.w_level);
                            td4.innerText = level_names[level-1];
                            td4.className = "level level-"+level;

                            tr.append(td1, td2, td3, td4);
                            tbody.append(tr);

                        });
                        createPage(page, pagesize, pageInfo, data.total);
                    }
                })
            }
            function search(){
                kw = kwID.value;
                loaddata();
            }
        </script>
    </body>
</html>